/*
 * Creator:     ML
 * CreatDate:   2019-10-24
 * descripts：  地区术语集
 * */
import React from 'react';
import { Form, Input, Select, Button, message, Row, Icon, Divider, Popconfirm, DatePicker, Table, Col, Card } from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
import store from 'store';
import CommonPagination from 'components/pagination';
import TerminologyReDetail from './TerminologyReDetail'

const { Option } = Select;

class TermRegional extends React.Component {
  constructor() {
    super();
    this.state = {
      tableData: [], // 列表数据
      total: 0,
      page: 1,
      pageSize: 50,
      size: "big",
      search: "",
    };
  }

  componentDidMount() {
    document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y  + 'px';
    if (this.state.size == "small") {
      this.setState({
        pageSize: 10
      })
    } else {
      this.setState({
        pageSize: 50
      })
    }
    this.getFindDate()
  }

  componentWillReceiveProps(nextProps) {

  }


  //调子组件
  onAttRef = (ref) => {
    this.childAtt = ref
  }
  // 点击查询
  handleQuery = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          values,
        }, () => {
          this.onShowSizeChange("1",this.state.pageSize)
        })
      }
    })
  }
  //查询
  getFindDate = (values,e) => {
    let { page, pageSize, } = this.state;
    let data = {
      params: [{
        code: values && values.code || "",
        descripts: values && values.dec || "",
        status: values && values.status || "",
      }],
      pagination: [{
        pageSize: pageSize,
        currentPage: page,
      }]
    }
    $http.post('urlS', this, {
      code: '05100214',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            search:e,
            tableData: res.result.Data,
            total: res.result.TotalCount,
          })
        }
      }
    })
  }
  // 修改page和pageSize 跳转至---
  onChange = (e) => {
    this.setState({ page: e, pageSize: this.state.pageSize, }, () => {
      // 重新调用查询方法
      let { values } = this.state;
      this.getFindDate(values);
    })
  }
  //下拉选择页数
  onShowSizeChange = (page, pageSize) => {
    // console.log("page",page,"pagesize",pageSize)
    this.setState({ page: 1, pageSize: pageSize }, () => {
      // 重新调用查询方法
      let { values } = this.state;
      this.getFindDate(values, "search");
    })
  }
  // 显示分页总条数
  showTotal(total) {
    return `共 ${total} 条`;
  }

  //点击Row
  onClickRow = (record) => {
    return {
      onClick: () => {
        this.setState({
          parms: record,
        })
        this.childAtt.clearInfo()
        if (this.state.rowIds === "") {
          this.setState({
            rowIds: record.diagnosisID,
          })
          this.childAtt.getInfo(record)
        } else {
          if (this.state.rowIds !== record.diagnosisID) {
            this.setState({
              rowIds: record.diagnosisID,
            });
            this.childAtt.getInfo(record)
          } else {
            this.setState({
              rowIds: "",
            });
            this.childAtt.clearInfo()
          }
        }
      },
    };
  }
  //点击查询后 表格行
  setRowClassNames = (record) => {
    return record.diagnosisID === this.state.rowIds ? 'clickRowStyle' : '';
  }
  render() {
    const { tableData, total, page, rowData } = this.state;

    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '代码',
        dataIndex: 'diagnosisCode',
        width: 120,
        key: 'patName',
        align: "center",
      }, {
        title: '描述',
        dataIndex: 'diagnosisDesc',
        width: 120,
        align: "center",
        key: '1'
      }, {
        title: '开始日期',
        dataIndex: 'startDate',
        width: 200,
        align: "center",
        key: '2'
      }, {
        title: '失效日期',
        dataIndex: 'stopDate',
        width: 200,
        align: "center",
        key: '3',
        render: (text, record, index) => {
          if (text == "") {
            return "--";
          } else{
            return text;
          }
        },
      },]

    const formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }
    const selectData = [
      {
        id: "",
        descripts: "全部"
      },
      {
        id: "Y",
        descripts: "可用"
      },
      {
        id: "N",
        descripts: "不可用"
      }
    ]
    // 状态选择
    let statusOpt = [];
    selectData && selectData.map((item, index) => {
      statusOpt.push(<Option key={index} value={item.id} title={item.descripts} >{item.descripts}</Option>)
    });

    return (
      <div>
        <div>
          <Form layout={'horizontal'}>
            <Row>
              <Col span={4}>
                <Form.Item label="代码" {...formLayout}>
                  {getFieldDecorator('code', {
                    rules: [{ required: false, message: '请输入' }]
                  })(
                    <Input onPressEnter={this.handleQuery}></Input>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label='描述' {...formLayout}>
                  {getFieldDecorator('dec', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Input onPressEnter={this.handleQuery}></Input>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label='状态' {...formLayout}>
                  {getFieldDecorator('status', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select allowClear style={{ width: '100%' }} placeholder="请选择">
                      {statusOpt}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Button style={{ margin: '3px 0 0 10px' }} type="primary" onClick={this.handleQuery}>查询</Button>
              </Col>
            </Row>
          </Form>
        </div>
        <Row>
          <Col span={8}>
            <Card>
              <Table
                columns={columns}
                dataSource={this.state.tableData}
                pagination={false}
                rowKey={record => record.key}
                onRow={this.onClickRow}
                rowClassName={this.setRowClassNames}
                bordered
                style={{ height: store.getState().tableHeight.y  + 'px',overflow:"auto"}}
              />
              <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableData}
                onChange={this.onChange.bind(this)} />

            </Card>
          </Col>
          <Col span={16} style={{marginLeft:"-1px"}}>
            <Card>
              <TerminologyReDetail onAttRef={this.onAttRef} handleQuery={this.handleQuery}></TerminologyReDetail>
            </Card>
          </Col>
        </Row>

      </div>
    )
  }
};
const TerminologyRegional = Form.create()(TermRegional);
export default TerminologyRegional;